<!--
author: 何其沆(pooky)
desc: Pool - Account Pool 展开形式1
date: 2021-11-12
-->
<template>
  <div class="active-expend">
    <div class="last-project-information">
      <div class="top-title">Last Project Information</div>
      <div v-if="record.list.list.length > 0" style="text-align: center">
        <div v-for="(item1, index1) in record.list.list" :key="index1" class="bottom-content">
          <div class="bottom-content-item">
            <span class="icon icon-icon_SalesPersonnel"></span>
            <span>{{ item1.displayName }}</span>
          </div>
          <div class="bottom-content-item">
            <span class="icon icon-icon_date"></span>
            <span>{{ item1.createOnAdd }}</span>
          </div>
          <div class="bottom-content-item">
            <span class="unit">{{ item1.currencyName }}</span>
            <span>{{ item1.amount }}</span>
          </div>
        </div>
      </div>
      <div v-else style="display: flex; justify-content: center; align-items: center">
        <NoData v-if="record.list.list.length === 0" fontSize="120px" />
        <span style="color: #bfbfbf">No Project Data</span>
      </div>
    </div>
    <div class="close-total">
      <div class="close-on">
        <div class="top-title">Close On</div>
        <div class="bottom-main">{{ record.turnPositiveOnAdd }}</div>
      </div>
      <div class="total-reaveal">
        <div class="top-title">Total Amount</div>
        <div class="bottom-main">
          <span class="unit">{{ record.list.currencyName }}</span>
          {{ record.list.total }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import NoData from '../../../components/NoData.vue'

defineProps({
  record: Object
})
</script>

<style scoped lang="less">
.active-expend {
  width: 100%;
  border-left: 1px solid @border-color;
  border-right: 1px solid @border-color;
  background-color: @white;
  display: flex;
  box-sizing: border-box;
  .last-project-information {
    width: 50%;
    border-right: 1px solid @border-color;
    .icon-none {
      display: inline-block;
      font-size: 120px;
    }
    .bottom-content {
      display: flex;
      box-sizing: border-box;
      font-size: 14px;
      justify-content: center;
      align-items: center;
      .bottom-content-item {
        flex: 1;
        display: flex;
        align-items: center;
        color: @black-85p;
        height: 40px;
        padding-left: 12px;
        font-size: 14px;
        .icon {
          font-size: 16px;
          margin-right: 10px;
        }
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  .close-total {
    width: 50%;
    display: flex;
    box-sizing: border-box;
    color: @black-85p;
    .close-on,
    .total-reaveal {
      width: 50%;
    }
    .close-on {
      border-right: 1px solid @border-color;
    }
    .bottom-main {
      width: 100%;
      padding-top: 11px;
      padding-left: 12px;
    }
  }
  .top-title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: @milk;
    padding-left: 12px;
    color: @black-85p;
    font-size: 14px;
    border-bottom: 1px solid @border-color;
  }
  .unit {
    color: @deep-gray;
    margin-right: 6px;
  }
}
</style>
